<template>
  <div class="search">
    <div class="searchInput">
      <mt-search v-model="value" placeholder="搜索"></mt-search>
      <mt-button type="default" @click="SearchData">搜索</mt-button>
      <mt-cell :title="item" v-for="(item,index) in oldlist" :key='index' :to="'/searchList/'+item">
        <span style="color: green" @click.stop.prevent='delData(index)'>X</span>
    </mt-cell>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      value: '',
      oldlist: this.getHistoryData()
    }
  },
  mounted () {
    // this.getHistoryData()
  },
  methods: {
    SearchData () {
      console.log(this.value)
      if (this.value !== '') {
        this.oldlist.push(this.value)
        localStorage.setItem('SearchList', JSON.stringify(this.oldlist))
        this.$router.push({name: 'SearchList', params: {key: this.value}})
      } else {
        alert('空的')
      }
    },
    getHistoryData () {
      var oldlist = localStorage.getItem('SearchList')
      return JSON.parse(oldlist) || []
    },
    delData (index) {
      this.oldlist.splice(index, 1)
      localStorage.setItem('SearchList', JSON.stringify(this.oldlist))
    }
    // test () {
    //   console.log('111')
    // }
  }
}
</script>
<style lang="scss" scoped>
.search {
    overflow: scroll;
  .searchInput {
    position: relative;
    .mint-search {
      height: 44px;
    }
    .mint-button {
      position: absolute;
      top: 0;
      right: 0px;
      z-index: 1;
      height: 43px;
      padding: 0 20px;
    }
  }
}
</style>
